<template>
  <div class="app main">
    <div class="headerInput">
      <div class="title">首页设置</div>
    </div>
    <a-tabs type="card" class="tabBox" @change="changeTabs">
      <a-tab-pane key="1" tab="公告"></a-tab-pane>
      <a-tab-pane key="2" tab="活动"></a-tab-pane>
    </a-tabs>
    <!-- <div class="content" :class="tabIndex===1?'':'disabled'"> -->
    <div class="content" v-show="tabIndex===1">
      <div class="flex cb">
        <div class="noticeBox flex">
          <div class="List">
            <a-list
              class="demo-loadmore-list"
              style="width:200px;"
              item-layout="horizontal"
              :data-source="noticeInfo"
            >
              <a-list-item
                slot="renderItem"
                slot-scope="item, index"
                @click="showInfo(item)"
                class="pointer"
              >
                <span>{{ item.ActivityName }}</span>
                <span style="display:flex;">
                  <a-icon type="edit" theme="twoTone" style="margin:0px 20px;" />
                  <a-icon type="delete" theme="twoTone" @click="delMoudule(item )" />
                </span>

                <!-- <a-list-item-meta>{{ item.ActivityName }}</a-list-item-meta> -->
              </a-list-item>
            </a-list>
          </div>
          <div class="flex btnBox">
            <a-icon type="plus-circle" theme="twoTone" class="btn" @click="add" />
            <!-- <a-icon type="minus-circle" theme="twoTone" class="btn" /> -->
          </div>
        </div>
        <div class="editWordBox">
          <a-form layout="inline" style="width:100%;margin:38px 0;">
            <a-form-item label="Announcement Title" class="searchInputBox">
              <a-input placeholder v-model="EditNoticeTitle" allowClear style="width:928.8px;" />
            </a-form-item>
          </a-form>

          <headImgUpload
            class="HeadUploadBox"
            @getAvatar="getNoticeImg"
            :propImageUrl="EditNoticeImgUrl"
          ></headImgUpload>

          <Editor @change="getNoticeEditorInfo" :wordHtml="defaultNoticeWordHtml"></Editor>
          <a-form layout="inline" class="submitBox">
            <a-form-item class="ml300">
              <a-button type="primary" @click="Save">Save</a-button>
            </a-form-item>
            <a-form-item class="ml50">
              <a-button type="primary" @click="View">View</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
    <div class="content" v-show="tabIndex===2">
      <div class="flex cb">
        <div class="noticeBox flex">
          <div class="List">
            <a-list
              class="demo-loadmore-list"
              style="width:200px;"
              item-layout="horizontal"
              :data-source="activityInfo"
            >
              <a-list-item
                slot="renderItem"
                slot-scope="item, index"
                @click="showInfo(item)"
                class="pointer"
              >
                <span>{{ item.ActivityName }}</span>
                <span style="display:flex;">
                  <a-icon type="edit" theme="twoTone" style="margin:0px 20px;" />
                  <a-icon type="delete" theme="twoTone" @click="delMoudule(item )" />
                </span>

                <!-- <a-list-item-meta>{{ item.ActivityName }}</a-list-item-meta> -->
              </a-list-item>
            </a-list>
          </div>
          <div class="flex btnBox">
            <a-icon type="plus-circle" theme="twoTone" class="btn" @click="add" />
            <!-- <a-icon type="minus-circle" theme="twoTone" class="btn" /> -->
          </div>
        </div>
        <div class="editWordBox">
          <a-form layout="inline" style="width:100%;margin:38px 0;">
            <a-form-item label="Announcement Title" class="searchInputBox">
              <a-input placeholder v-model="EditActivityTitle" allowClear style="width:908px;" />
            </a-form-item>
          </a-form>
          <div class="flex">
            <headImgUpload
              style="width:930px;height:200px"
              class="HeadUploadBox2"
              @getAvatar="getNoticeImg"
              :propImageUrl="EditActivityImgUrl"
            ></headImgUpload>
            <a-textarea
              placeholder
              allow-clear
              v-model="EditActivityWord"
              class="summaryBox"
              :auto-size="{ minRows: 9, maxRows: 9 }"
            />
          </div>

          <Editor @change="getNoticeEditorInfo" :wordHtml="defaultActivityIWordHtml"></Editor>
          <a-form layout="inline" class="submitBox">
            <a-form-item class="ml300">
              <a-button type="primary" @click="Save">Save</a-button>
            </a-form-item>
            <a-form-item class="ml50">
              <a-button type="primary" @click="View">View</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
    <!-- 抽屉 -->
    <a-drawer
      title
      :placement="placement"
      :closable="false"
      :visible="DrawerVisible"
      @close="onClose"
      width="988"
    >
      <div class="drawerWordContent" v-html="EditNoticeWordHtml"></div>
    </a-drawer>
  </div>
</template>

<script>
import headImgUpload from '@/components/upload/singleJPGUpload'
import Editor from '@/components/Editor/commonWangEditor'

export default {
  data() {
    return {
      tableData: [],
      totalCount: 0,
      currentPage: 1,
      pageSize: 20,
      doType: '',
      moudelVisible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      activityInfo: [],
      noticeInfo: [],
      EditNoticeId: '',
      EditActivityId: '',

      ActivityType: 1, //1公告 2 活动
      EditNoticeImgUrl: '',
      EditActivityImgUrl: '',
      actionUrl: this.$host + '/api/UploadFile',
      headers: {
        authorization: 'authorization-text',
      },
      defaultNoticeWordHtml: '',
      defaultActivityIWordHtml: '',
      EditNoticeWordHtml: '',
      EditActivityIWordHtml: '',
      EditActivityWord: '',
      DrawerVisible: false,
      placement: 'right',
      EditNoticeTitle: '',
      EditActivityTitle: '',
      tabIndex: 1,
      ActivityId: '',
    }
  },
  watch: {
    IsEnabled() {
      // if (this.IsEnabled) {
      //   this.isCheckAbled = true
      // } else {
      //   this.isCheckAbled = false
      // }
    },
  },
  created() {
    // this.getTableData()
    this.init()
  },
  components: {
    headImgUpload,
    Editor,
  },
  methods: {
    init() {
      this.getActorsInfo()
    },
    showInfo(item) {
      console.log('item :>> ', item)
      this.doType = 'edit'
      this.$nextTick(() => {
        if (this.ActivityType === 1) {
          this.EditNoticeImgUrl = item.PictrueUrl
          this.EditNoticeTitle = item.ActivityName
          this.defaultNoticeWordHtml = item.Details
          this.EditNoticeWordHtml = item.Details //默认参数

          this.EditNoticeId = item.ActivityId
        } else if (this.ActivityType === 2) {
          this.EditActivityImgUrl = item.PictrueUrl
          this.EditActivityTitle = item.ActivityName
          this.defaultActivityIWordHtml = item.Details
          this.EditActivityIWordHtml = item.Details
          this.EditActivityId = item.ActivityId
          this.EditActivityWord = item.Summary
        }
      })
    },
    Save() {
      if (this.tabIndex === 1) {
        if (!this.EditNoticeImgUrl) {
          this.$message.warning('Please upload an image of the  banner')
          return
        } else if (!this.EditNoticeWordHtml) {
          this.$message.warning('Please enter the content of the announcement')
          return
        } else if (!this.EditNoticeTitle) {
          this.$message.warning('Please enter  the title')
          return
        }
      } else if (this.tabIndex === 2) {
        if (!this.EditActivityImgUrl) {
          this.$message.warning('Please upload an image of the  banner')
          return
        } else if (!this.EditActivityIWordHtml) {
          this.$message.warning('Please enter the content of the announcement')
          return
        } else if (!this.EditActivityWord) {
          this.$message.warning('Please enter the Summary')
          return
        } else if (!this.EditActivityTitle) {
          this.$message.warning('Please enter  the title')
          return
        }
      }
      if (this.doType === 'add') {
        this.addInfo()
      } else {
        this.editInfo()
      }
    },
    View() {
      this.DrawerVisible = true
    },
    getNoticeEditorInfo(e) {
      if (this.tabIndex === 1) {
        this.EditNoticeWordHtml = e
      }
      if (this.tabIndex === 2) {
        this.EditActivityIWordHtml = e
      }
      console.log('EditNoticeWordHtml :>> ', e)
    },
    changeTabs(e) {
      console.log('changeTabs :>> ', e)
      this.tabIndex = Number(e)
      this.ActivityType = Number(e)
    },
    showDrawer() {
      this.DrawerVisible = true
    },
    onClose() {
      this.DrawerVisible = false
    },
    onDrawerChange(e) {
      this.placement = e.target.value
    },
    getNoticeImg(e) {
      if (this.tabIndex === 1) this.EditNoticeImgUrl = e
      if (this.tabIndex === 2) this.EditActivityImgUrl = e
      console.log('EditNoticeImgUrl :>> ', e)
    },

    getActorsInfo() {
      // 查询活动
      const a = {
        method: 'SysActivity_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        orderByList: 'CreateTime desc',
        datas: {
          ActivityType: 2, //1公告 2 活动
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.activityInfo = result.data
        }
      })

      //  查询公告
      const b = {
        method: 'SysActivity_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        orderByList: 'CreateTime desc',
        datas: {
          ActivityType: 1, //2 活动 1公告
        },
      }
      this.$post(b).then((result) => {
        if (result.code == 0) {
          this.noticeInfo = result.data
        }
      })
    },
    add() {
      this.doType = 'add'
      // 清空参数
      if (this.ActivityType === 1) {
        this.EditNoticeImgUrl = ''
        this.EditNoticeTitle = ''
        this.EditNoticeWordHtml = ''
        this.EditNoticeId = ''
        this.defaultNoticeWordHtml = ''
      } else {
        this.EditActivityImgUrl = ''
        this.EditActivityTitle = ''
        this.EditActivityIWordHtml = ''
        this.EditActivityId = ''
        this.EditActivityWord = ''
        this.defaultActivityIWordHtml = ''
      }
    },
    editMoudule(item, index) {
      this.doType = 'edit'
      this.ModalTitle = 'Edit '
      this.ModuleTipIndex = index
      console.log('item :>> ', item)
    },
    delMoudule(item) {
      console.log(item, 'del')
      const that = this
      this.doType = 'del'
      const a = {
        method: 'SysActivity_Del',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          ActivityId: item.ActivityId,
        },
      }
      this.$confirm({
        title: 'warm prompt',
        content: 'Do you want to Delete this data?',
        onOk() {
          that.$post(a).then((result) => {
            if (result.code == 0) {
              that.$message.success('successfully delete!')
              that.getActorsInfo()
            }
          })
        },
      })
    },
    addInfo() {
      let data = {}
      if (this.tabIndex === 1) {
        data = {
          PictrueUrl: this.EditNoticeImgUrl,
          ActivityName: this.EditNoticeTitle,
          Details: this.EditNoticeWordHtml,
          ActivityType: this.ActivityType,
        }
      } else if (this.tabIndex === 2) {
        data = {
          PictrueUrl: this.EditActivityImgUrl,
          ActivityName: this.EditActivityTitle,
          Summary: this.EditActivityWord,
          Details: this.EditActivityIWordHtml,
          ActivityType: this.ActivityType,
        }
      }
      const a = {
        method: 'SysActivity_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: data,
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('Add successfully!')
          this.getActorsInfo()
        }
      })
    },
    editInfo() {
      let data = {}
      if (this.tabIndex === 1) {
        data = {
          PictrueUrl: this.EditNoticeImgUrl,
          ActivityName: this.EditNoticeTitle,
          Details: this.EditNoticeWordHtml,
          ActivityType: this.ActivityType,
          ActivityId: this.EditNoticeId,
        }
      } else if (this.tabIndex === 2) {
        data = {
          PictrueUrl: this.EditActivityImgUrl,
          ActivityName: this.EditActivityTitle,
          Summary: this.EditActivityWord,
          Details: this.EditActivityIWordHtml,
          ActivityType: this.ActivityType,
          ActivityId: this.EditActivityId,
        }
      }
      const a = {
        method: 'SysActivity_Mod',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: data,
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('updated successfully!')
          this.getActorsInfo()
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import url('css/indexManage.less');
</style>